<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>
    * { margin: 0; padding: 0; }
    ul, li { list-style: none; }

    #magnifier {
      position: relative;
      width: 450px;
      margin: 54px 0 0 70px;
    }
    .small-box {
      position: relative;
      width: 450px;
      height: 450px;
      margin-bottom: 20px;
      border: 1px solid #eee;
    }
    .small-box img {
      display: block;
    }
    .small-box .hover {
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      width: 200px;
      height: 200px;
      border: 1px solid #aaa;
      background: #0099ff;
      opacity: .5;
      filter: alpha(opacity: 50);
      cursor: move;
    }
    .thumbnail-box {
      position: relative;
      width: 100%;
    }
    .thumbnail-box .btn {
      position: absolute;
      top: 50%;
      width: 22px;
      height: 32px;
      margin-top: -16px;
    }
    .thumbnail-box .btn-prev {
      left: 0;
      background: url(images/btn_prev.png) no-repeat;
    }
    .thumbnail-box .btn-next {
      right: 0;
      background: url(images/btn_next.png) no-repeat;
    }
    .thumbnail-box .list {
      overflow: hidden;
      width: 390px;
      margin: 0 auto;
    }
    .thumbnail-box .wrapper {
      width: 100000px;
    }
    .thumbnail-box .list .item {
      float: left;
      margin: 0 10px;
    }
    .thumbnail-box .list .item-cur {}
    .thumbnail-box .list .item img {
      border: 2px solid #fff;
    }
    .thumbnail-box .list .item-cur img {
      border: 2px solid #e53e41;
    }
    .big-box {
      display: none;
      overflow: hidden;
      position: absolute;
      left: 451px;
      top: 0;
      width: 540px;
      height: 540px;
      border: 1px solid #e4e4e4;
    }
    .big-box img {
      display: block;
    }
  </style>
</head>
<body style="height: 2000px;">

  <div id="magnifier">
    <div class="small-box">
      <img src="images/small_1.jpg" alt="#">
      <span class="hover"></span>
    </div>
    <div class="thumbnail-box">
      <a href="javascript:;" class="btn btn-prev"></a>
      <a href="javascript:;" class="btn btn-next"></a>
      <div class="list">
        <ul class="wrapper">
          <li class="item item-cur" data-src="images/small_1.jpg"><img src="images/thumbnail_1.jpg" alt="#"></li>
          <li class="item" data-src="images/small_2.jpg"><img src="images/thumbnail_2.jpg" alt="#"></li>
          <li class="item" data-src="images/small_3.jpg"><img src="images/thumbnail_3.jpg" alt="#"></li>
          <li class="item" data-src="images/small_4.jpg"><img src="images/thumbnail_4.jpg" alt="#"></li>
          <li class="item" data-src="images/small_5.jpg"><img src="images/thumbnail_5.jpg" alt="#"></li>
          <li class="item" data-src="images/small_6.jpg"><img src="images/thumbnail_6.jpg" alt="#"></li>
        </ul>
      </div>
    </div>
    <div class="big-box">
      <img src="images/big_1.jpg" alt="#">
    </div>
  </div>

  <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script src="magnifier.js"></script>
  <script>
    $(function () {

      $('#magnifier').magnifier();

    });
  </script>
  
</body>
</html>